<template>
  <div class="container">
    <div id="map" class="map"></div>
    <button style="position: absolute;top: 100px;left: 100px;z-index: 11" @click.stop="handleGetPoint">Click</button>
  </div>
</template>

<script setup>
import {onMounted} from "vue";

import TyphoonIcon from "./assets/typhoon.png";

let map;
let points;
let mark;
let index = 1;
const getTyphoonData = async () => {
  const res = await (await fetch("https://typhoon.slt.zj.gov.cn/Api/TyphoonInfo/202408", {method: "GET"})).json();
  return res;
}

const handleGetPoint = () => {
  // console.log(map.pointToPixel(points[0]));`1``1`  1                                            `11``1`r`111```````````````````````````````````````````````````````````````````````````````````
  mark.setPosition(points[index++]);
}

onMounted(async () => {
  map = new BMapGL.Map("map");
  const point = new BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 6);
  map.enableScrollWheelZoom();

  const data = await getTyphoonData();

  points = [];
  for (const p of data.points) {
    const point = new BMapGL.Point(Number(p.lng), Number(p.lat));
    points.push(point);
    // console.log(map.pointToPixel(point));
  }

  const polyline = new BMapGL.Polyline(points, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});
  map.addOverlay(polyline);

  const icon = new BMapGL.Icon(TyphoonIcon, new BMapGL.Size(30, 30));

  mark = new BMapGL.Marker(points[0], {icon: icon});

  map.addOverlay(mark);

});
</script>
<style scoped>
.container {
  height: 100%;
}

.map {
  height: 100%;
}
</style>
